<template>

  <el-container>
    <el-header>
      <!-- 查询条件 -->
      <el-row>
        <div class="block">

          <el-input style="width: 240px" placeholder="用户" :prefix-icon="Search" />

          <el-button type="primary" @click="SearchHandle">查询</el-button>
          <span>
            <el-button icon="Plus" type="success" @click="Addhandle">添加用户</el-button>
          </span>

          <el-button icon="Plus" type="success" @click="Printhandle">打印</el-button>
          <!-- </el-space> -->
        </div>
      </el-row>
    </el-header>
    <el-main>
      <div class="home">
        <!-- 数据列表 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-table :data="UsersList" style="width: 100%; " :height="500" stripe>
              <!-- 添加行号列 -->
              <el-table-column type="index" label="#" width="60">
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="username" label="工号" width="120"> </el-table-column>
              <el-table-column prop="nickname" label="姓名" min-width="80"> </el-table-column>
              <el-table-column label="性别" width="180">
                <template #default="scope">
                  <el-tag v-if="scope.row.gender == 1">男</el-tag>
                  <el-tag type="warning" v-else>女</el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="deptName" label="科室" min-width="80"> </el-table-column>
              
              <el-table-column label="启用" width="180">
                <template #default="scope">
                  <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" />
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template #header>
                  <div class="headstr">
                    操作
                  </div>
                </template>
                <template #default="scope">
                  <el-button type="primary" size="small" @click="EditHandle(scope.$index, scope.row)">
                    修改
                  </el-button>
                  <el-button type="danger" size="small" @click="ReSetHandle(scope.$index, scope.row)">
                    重置密码
                  </el-button>
                  <!-- <el-button type="danger" size="small" @click="DelHandle(scope.$index, scope.row)">
                    删除
                  </el-button> -->
                </template>
              </el-table-column>
            </el-table>

          </el-col>
        </el-row>

      </div>
    </el-main>
  </el-container>

  <!-- 新增用户 -->
  <el-dialog v-model="dialogFormVisible" width="90%" title="用户信息">
    <el-form ref="AddUserRef" :model="UserModel" :rules="AddUserRules" label-width="100px" label-position="right">
      <el-form-item label="工号:" prop="username">
        <el-input v-model="UserModel.username"  :disabled="IsEdit" />
      </el-form-item>
      <el-form-item label="性别:" prop="gender">
        <el-select v-model="UserModel.gender" placeholder="选择性别">
          <el-option label="男" value="1" />
          <el-option label="女" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名:" prop="nickname">
        <el-input v-model="UserModel.nickname" />
      </el-form-item>
      <el-form-item label="科室:">
        <el-select v-model="UserModel.deptId" placeholder="选择科室">
          <el-option v-for="item, i in DeptList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="角色:">
        <el-select v-model="UserModel.roles" multiple collapse-tags placeholder="选择角色" style="width: 240px">
          <el-option v-for="item, i in RoleList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="状态:">
        <el-tooltip :content="'是否启用'" placement="top">
          <el-switch v-model="UserModel.status" 
            active-value="1" inactive-value="0" />
        </el-tooltip>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="SaveHandle">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import router from "@/router";
import dayjs from "dayjs";
import { ref, onMounted, toRaw, watchEffect, computed } from "vue";
//组件
import { ElNotification } from "element-plus"
//Api
import { GetUserById, GetUserList, GetDeptList, SaveUserInfo, GetRoleList,ReSetUserPass} from "../util/request"
 
//科室字典
const DeptList = ref([]);
//加载科室字典
const LoadDeptList = () => {
  GetDeptList({}).then(res => {
    DeptList.value = res;
  })
}
//角色字典

const RoleList = ref([]);

//加载角色字典

const LoadRoleList = () => {
  GetRoleList({}).then(res => {
    RoleList.value = res;
  })
}

const ReSetHandle=(i,row)=>{

  ReSetUserPass(row).then(res=>{
    showSuccess('密码已重置为：'+res)    
  })
}

///添加用户规则
const AddUserRules = computed(() => {
  return {
    username: [
      {
        required: true,
        trigger: "blur",
        message: "请填写工号",
      },
    ],
    nickname: [
      {
        required: true,
        trigger: "blur",
        message: "请填写姓名",
      }
    ]
  };
});

//添加用户表单
const AddUserRef = ref();

//新建弹出框显示隐藏
const dialogFormVisible = ref(false)
//新建按钮
function Addhandle() {
  IsEdit.value=false;
  UserModel.value = ReModel;
  dialogFormVisible.value = true;
}
//提示成功
const showSuccess = (res) => {

  ElNotification({ title: '成功', message: res || '操作成功', type: 'success', })
}
//提示失败
const showFail = (msg) => {
  ElNotification({ title: '失败', message: msg, type: 'error', })
}

//重置默认数据
let ReModel = { id: "", username: "", gender: "1", nickname: "", password: "", deptId:""};

//------------------------------用户信息-----------
//保存的用户实体
const UserModel = ref({});

//用户列表
const UsersList = ref([]);

//搜索
function SearchHandle() {
  let parm = {};
  GetUserList(parm).then((res) => {
    UsersList.value = res;
  });
}

const IsEdit=ref(true);

//修改
const EditHandle =(index, row)=> {
let parm={userid:row.id};
  GetUserById(parm).then(res=>{
    UserModel.value=res;
    IsEdit.value=true;
    dialogFormVisible.value = true;
  }).catch(c=>{

  })
}

//保存用户信息
function SaveHandle() {
  console.log('点击登录');
  AddUserRef.value?.validate((valid) => {
    if (valid) {
      SaveUserInfo(UserModel.value).then(res => {
        dialogFormVisible.value = false;
        SearchHandle()
      })
    }
  });
}
//
const Printhandle=()=>{

  const c = router.resolve({
    path: "/viewer",
    query: { reportUrl: 'TestReport' },
  });
  window.open(c.href, "_blank");
}
//
const tableHeight = ref('');

//挂载完毕
onMounted(() => {
  //科室字典
  LoadDeptList();
  LoadRoleList();
  SearchHandle();
  //RtmsDefault();
})

</script>

<style scoped lang="scss">
.pageheader {
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  vertical-align: middle;
  align-items: center;
}

.bottomGroup {
  position: fixed;
  z-index: 999;
  bottom: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;
  background-color: grey;
  color: white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  padding: 20px;
  margin: 0px 2px;
  box-sizing: border-box;
}

.footer-area {
  height: 10px;
}

.box-card {
  padding: 0px;
  margin: 0px;
}

.headstr {
  text-align: center;
}
</style>